// hover only for non-mobile
@mixin hover() {
  @media (hover: hover) {
    &:hover { 
      @content;
     }
  }
}

// set ellipsis
@mixin ellipsis() {
  min-width: 0; // for flex
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

// set common button style
@mixin common-button-style() {
  padding: 0.6rem;
  font-weight: 500;
  border-radius: 2px;
  line-height: 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
}